<template>
   <div class="CampusInformation">
      <myHead title="消息通知"></myHead>
      <div class="fenG"></div>
      <div class="content">
         <div class="header">
            <div class="headerBox" v-for="(x,y) in typeTit" @click="type(y)">
               <p :class="typeIndex == y?'showTyped showType':'showType'">{{x.text}}</p>
               <transition name="el-zoom-in-center">
                  <p v-show="y == typeIndex"></p>
               </transition>
            </div>
         </div>
         <!-- 空订单状态 -->
         <div class="empty" :style="{minHeight:$store.state.minHeight-1.1+'rem'}" v-show="list.length<1">
            <img src="../../../static/img/nomsg001.png" alt="">
            <p>暂无消息</p>
         </div>

         <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功" v-show="list.length>=1">
               <div class="order-Wrap">
                  <van-list
                          v-model="loading"
                          :finished="finished"
                          finished-text="没有更多了"
                          @load="onLoad"
                  >
                     <van-cell v-for="(item,y) in list" :key="y" v-if="typeIndex==0">
                       <div class="item-msg">
                          <img src="../../../static/img/uhead.jpg" alt="">
                          <div class="item-msg-r">
                             <p>一线牵</p>
                             <div>
                                <p>亲，你家的货看起来还不错嘛，给我来...</p>
                                <span>03-31</span>
                             </div>
                          </div>
                          <p class="item-line"></p>
                       </div>
                     </van-cell>
                     <van-cell v-for="(item,y) in list" :key="y" v-if="typeIndex==1">
                       <div class="msg-box">
                          <div class="msg-box-tit">2028年01月15日 13:47</div>
                          <div class="msg-box-info">
                             <div>
                                <p>福利送达通知</p>
                                <p>30分钟前</p>
                             </div>
                             <p>流沙包,您好,恭喜你成为包图网第100001个会员,我们将 赠送您一年的包图VIP会员,您可以享受任何素材的下载 希望您一直支持包图网！</p>
                             <p>查看详情></p>
                          </div>
                       </div>
                     </van-cell>
                  </van-list>
               </div>
         </van-pull-refresh>
      </div>


   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";
    export default {
        name: "myMsgNotification",
        components:{
            myHead
        },
        data(){
            return {
                typeTit:[{text:'消息通知'},{text:'系统消息通知'}],
                data:[{list:[]},{list:[]}],
                list:[1],
                loading: false,
                finished: false,
                refreshing: false,
                typeIndex:0
            }
        },
        methods:{
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.list = [];
                        this.refreshing = false;
                    }

                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.loading = false;

                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },
            // 切换type
            type(index){
                this.typeIndex = index;
            },
            jump(page){
                this.$router.push({
                    name:page
                })
            }
        }
    }
</script>

<style scoped>
   .CampusInformation {
      padding-top: 1rem;
   }
   .header {
      position: fixed;
      top: .5rem;
      left: 0;
      z-index: 99;
      background-color: #FFFFFF;
      height: .5rem;
      width: 100%;
      box-sizing: border-box;
      padding: 0 .15rem;
      white-space: nowrap;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-around;
   }
   .header::-webkit-scrollbar {
      display: none;
   }
   .headerBox {
      width: 27%;
      height: 100%;
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
   }
   .headerBox>p:nth-child(2) {
      width: 100%;
      position: absolute;
      bottom: .05rem;
      height: .02rem;
      background-color: #FF8C3D;
   }
   .showType {
      height: .4rem;
      line-height: .4rem;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #333333;
   }
   .showTyped {
      color: #FF8C3D;
   }

   .order-Wrap {
      background-color: #F5F5F5;
   }
   .item-msg {
      display: flex;
      flex-flow: row;
      align-items: center;
      padding: 0 .15rem;
      height: .7rem;
      position: relative;
   }
   .item-line {
      width: 90%;
      height: .01rem;
      background-color: #D7D7D7;
      position: absolute;
      bottom: 0;
   }
   /*.item-line:nth-last-child(1) {*/
   /*   display: none;*/
   /*}*/

   .item-msg>img {
      width: .44rem;
      height: .44rem;
      border-radius: 50%;
      margin-right: .1rem;
   }
   .item-msg-r {
      height: 100%;
      box-sizing: border-box;
      padding: .1rem 0;
      width: calc(100% - .54rem);
      display: flex;
      flex-flow: column;
      justify-content: space-around;
   }
   .item-msg-r>div {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .item-msg-r>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #3B3B3B;
      line-height: .15rem;
   }
   .item-msg-r>div>p {
      width: 2.4rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size:.13rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #999999;
      line-height: .14rem;
   }
   .item-msg-r>div>span {
      font-size:.12rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #999999;
      line-height: .13rem;
   }

   .msg-box {
      background-color: #F5F5F5;
      display: flex;
      flex-flow: column;
      align-items: center;
   }
   .msg-box-tit {
      height: .2rem;
      padding: 0 .12rem;
      font-size:.12rem;
      font-family:PingFang SC;
      font-weight:400;
      background-color: #CCCCCC;
      border-radius: .04rem;
      line-height: .2rem;
      color: #FFFFFF;
      margin: .1rem 0;
   }
   .msg-box-info {
      width:3.45rem;
      height:1.47rem;
      box-sizing: border-box;
      padding: .2rem .1rem;
      background:rgba(255,255,255,1);
      border-radius:.05rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      margin-bottom: .1rem;
   }
   .msg-box-info>div {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .msg-box-info>div>p:nth-child(1) {
      font-size:.15rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #333333;
      line-height: .16rem;
   }
   .msg-box-info>div>p:nth-child(2) {
      font-size:.12rem;
      font-family:PingFang SC;
      font-weight:400;
      line-height: .13rem;
      color: #989898;
   }
   .msg-box-info>p:nth-child(2) {
      font-size:.13rem;
      font-family:PingFang SC;
      font-weight:400;
      color:rgba(102,102,102,1);
      line-height:.17rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
   }
   .msg-box-info>p:nth-child(3) {
      font-size:.13rem;
      line-height: .13rem;
      font-family:PingFang SC;
      color: #999999;
      text-decoration:underline;
      align-self: flex-end;
   }

   .fenG {
      width: 100%;
      height: .1rem;
      background-color: #F5F5F5;
   }
   .empty {
      background-color: #F5F5F5;
      display: flex;
      flex-flow: column;
      align-items: center;
      box-sizing: border-box;
      padding-top: .3rem;
   }
   .empty>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #999999;
   }
   .empty>img {
      width: 1.62rem;
      max-height: 1.26rem;
      margin-bottom: .2rem;
   }


   /* 懒加载适配 */
   >>> .van-cell {
      padding: 0;
      line-height: 0;
      font-size: 0;
   }
   >>> .van-list__loading {
      font-size: .14rem;
      line-height: .5rem;
   }
   >>> .van-loading__spinner--circular{
      width: .16rem;
      height: .16rem;
   }
   >>> .van-loading__text {
      font-size: .14rem;
      margin-left: .08rem;
   }
   >>> .van-cell:not(:last-child)::after {
      border-bottom: none;
   }
   >>> .van-cell:nth-last-child(1) .item-line {
      /*margin-bottom: .1rem;*/
      display: none;
   }



</style>
